<template>
  <el-dialog
    v-model="visible"
    title="催款记录详情"
    width="800px"
    @close="handleClose"
  >
    <el-scrollbar max-height="500px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="催款记录ID">
          {{ record?.collectionInfo?.collectionId || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          <el-link type="primary" @click="viewOrderDetail">
            {{ record?.orderInfo?.platformOrderId || '-' }}
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">
          ¥{{ record?.orderInfo?.amount?.toFixed(2) || '0.00' }}
        </el-descriptions-item>
        <el-descriptions-item label="订单日期">
          {{ formatDate(record?.orderInfo?.orderDate) }}
        </el-descriptions-item>
        <el-descriptions-item label="客户名称">
          {{ record?.customerInfo?.name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ record?.customerInfo?.contactPerson || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ record?.customerInfo?.phone || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系邮箱">
          {{ record?.customerInfo?.email || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="催款方式">
          <el-tag :type="getCollectionMethodType(record?.collectionInfo?.method)">
            {{ getCollectionMethodLabel(record?.collectionInfo?.method) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="催款时长">
          {{ record?.collectionInfo?.duration || 0 }}分钟
        </el-descriptions-item>
        <el-descriptions-item label="催款时间">
          {{ formatDate(record?.collectionInfo?.collectionTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人">
          {{ record?.collectionInfo?.operator || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="下次跟进日期">
          <span :class="{ 'warning-text': isOverdue(record?.collectionInfo?.nextFollowupDate) }">
            {{ formatDate(record?.collectionInfo?.nextFollowupDate) }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="满意度评分">
          <el-rate
            :model-value="record?.collectionInfo?.satisfactionScore || 0"
            disabled
            show-score
            text-color="#ff9900"
          />
        </el-descriptions-item>
        <el-descriptions-item label="是否批量操作">
          <el-tag :type="record?.collectionInfo?.isBatch ? 'success' : 'info'">
            {{ record?.collectionInfo?.isBatch ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="催款结果" :span="2">
          {{ record?.collectionInfo?.result || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注信息" :span="2">
          {{ record?.collectionInfo?.notes || '-' }}
        </el-descriptions-item>
      </el-descriptions>
      
      <div class="history-section" v-if="collectionHistory.length > 0">
        <h4>催款历史</h4>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in collectionHistory"
            :key="index"
            :timestamp="formatDate(item.timestamp)"
            placement="top"
          >
            <el-card>
              <h5>{{ item.operator }} - {{ item.method }}</h5>
              <p>{{ item.result }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-scrollbar>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'

interface CollectionRecord {
  id: string
  orderInfo: {
    platformOrderId: string
    amount: number
    orderDate: string
  }
  customerInfo: {
    name: string
    contactPerson: string
    phone: string
    email: string
  }
  collectionInfo: {
    collectionId: string
    method: string
    duration: number
    result: string
    collectionTime: string
    operator: string
    notes: string
    isBatch: boolean
    nextFollowupDate: string
    satisfactionScore: number
  }
}

interface CollectionHistoryItem {
  timestamp: string
  operator: string
  method: string
  result: string
}

interface Props {
  modelValue: boolean
  record: CollectionRecord | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'edit', record: CollectionRecord): void
}>()

const visible = ref(false)
const collectionHistory = ref<CollectionHistoryItem[]>([
  {
    timestamp: '2023-03-01T10:30:00',
    operator: '李四',
    method: '电话催款',
    result: '已联系客户，承诺3月底付款'
  },
  {
    timestamp: '2023-02-15T14:20:00',
    operator: '王五',
    method: '邮件催款',
    result: '发送催款邮件，等待客户回复'
  }
])

watch(
  () => props.modelValue,
  (newVal: boolean) => {
    visible.value = newVal
  }
)

watch(
  () => visible.value,
  (newVal: boolean) => {
    emit('update:modelValue', newVal)
  }
)

const handleClose = () => {
  visible.value = false
}

const handleEdit = () => {
  if (props.record) {
    emit('edit', props.record)
    handleClose()
  }
}

const viewOrderDetail = () => {
  ElMessage.info('查看订单详情')
}

const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN')
}

const getCollectionMethodType = (method: string | undefined) => {
  const typeMap: Record<string, string> = {
    phone: 'primary',
    email: 'success',
    visit: 'warning'
  }
  return typeMap[method || ''] || 'info'
}

const getCollectionMethodLabel = (method: string | undefined) => {
  const labelMap: Record<string, string> = {
    phone: '电话',
    email: '邮件',
    visit: '上门'
  }
  return labelMap[method || ''] || method || '-'
}

const isOverdue = (dateString: string | undefined) => {
  if (!dateString) return false
  const date = new Date(dateString)
  const now = new Date()
  return date < now
}
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.history-section {
  margin-top: 20px;
  
  h4 {
    margin-bottom: 16px;
    color: #303133;
  }
}

.warning-text {
  color: #e6a23c;
  font-weight: bold;
}
</style>